<template>
	<scroll-view scroll-y="true" class="popup-container" :style="{height:wh+'px'}">
		<view class="search-popup" v-for="item in popupList" :key="item.id">
			<view class="title">
				{{item.name}}
			</view>
			<view class="cate">
				<view :class="['cate-item',active===index? 'active':'']" v-for="(text,index) in item.data" :key="index">
					<text class="cate-text">{{text}}</text>
				</view>
				<view class="zhankai" v-if="item.data.length>=8">
					展开
				</view>
			</view>
		</view>
		<view class="bottom-btn">
			<button type="default" class="btn">清除筛选</button>
			<button type="default" class="btn" @click="close">确认筛选</button>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		props: {
			popupList: {
				type: Array
			},
			wh:{
				type:Number,
			}
		},
		data() {
			return {
				active:0
			};
		},
		onLoad() {
		},
		methods:{
			close(){
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss">
	.popup-container {
		width: 750rpx;
		.bottom-btn{
			display: flex;
			justify-content: space-around;
			margin-bottom: 10px;
			.btn{
				width: 150px;
				height: 30px;
				border-radius: 30px;
				line-height: 30px;
				font-size: 12px;
				background-color: #3f51b5;
				color: #FFFFFF;
			}
		}
		.search-popup {
			width: 100%;
			margin-bottom: 20px;

			.title {
				margin-left: 15px;
				margin-bottom: 15px;
			}

			.cate {
				display: flex;
				align-content: flex-start;
				flex-flow: row wrap;

				.zhankai {
					text-align: center;
					margin: 0 auto;
					margin-bottom: 10px;
				}
				
				.cate-item {
					box-sizing: border-box;
					border: 1px solid #aaaaaa;
					padding: 0 5px;
					border-radius: 10px;
					width: 66px;

					margin: 10px;
					height: 22px;

					.cate-text {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: clip;
						font-size: 12px;
						text-align: center;
						display: block;
					}
				}
				.active{
					color: #3f51b5;
					border: 1px solid #3f51b5;
				}
			}
		}
	}
</style>
